import { useEffect, useState } from 'react'
import style from './meterial.module.css'
import Libs from "../../compoents/commont/Libs";
import { Tabs } from 'antd';
import tu1 from "../../assets/images/tu1.png";
import tu11 from "../../assets/images/tu11.png";
import tu2 from "../../assets/images/tu2.png";
import tu22 from "../../assets/images/tu22.png";
import tu3 from "../../assets/images/tu3.png";
import tu33 from "../../assets/images/tu33.png";
import Search from "../../compoents/commont/Search";
import One from "./My/one/One";
import Two from "./My/two/Two";
import Three from "./My/three/Three";
import { imgs } from "../../compoents/icons";
import BottomRight from "../../compoents/commont/BottomRight";
// 素材中心的大盒子
function Index() {
  const height = '260px'
  //tab标签key值
  const [keys, setKeys] = useState('0')
  //本地存储
  const [defaultActiveKey, setDefaultActiveKey] = useState(localStorage.getItem('activekey') as string ? localStorage.getItem('activekey') as string : '0')
  //change事件
  const onChange = (key: string) => {
    // console.log(key);
    setKeys(key)
    let items1 = [...items]
    items1.forEach((item) => {
      if (item.key == key) {
        item.flag = true
      }
      else {
        item.flag = false
      }
    })
    setItems(items1)
    localStorage.setItem('activekey', key)
  };
  useEffect(() => {
    let activekey = localStorage.getItem('activekey')
    if (activekey) {
      setKeys(activekey)
      let items1 = [...items]
      items1.forEach((item) => {
        if (item.key == activekey) {
          item.flag = true
        }
        else {
          item.flag = false
        }
      })
      setItems(items1)
    }
  }, [])
  //
  const handleError = (e: any) => {
    e.currentTarget.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.68436686378f877196395fd9ef9b1550?rik=O%2fHsvdAkkiWtXA&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f58%2f10%2f5lreEdjtgA.jpg&ehk=0bzs3ur7UkrixDJ8e%2bJO82LAgti%2b6ISuUuSzV5sFMe4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'; // 使用外部链接进行测试
  };
  //类型
  interface items {
    key: string,
    icon: any,
    hovericon: any,
    flag: boolean
  }
  const [items, setItems] = useState([
    {
      key: '0',
      icon: tu1,
      hovericon: tu11,
      title: '图片',
      flag: false
    },
    {
      key: '1',
      icon: tu2,
      hovericon: tu22,
      title: '素材',
      flag: false
    },
    {
      key: '2',
      icon: tu3,
      hovericon: tu33,
      title: '字体',
      flag: false
    },
  ]);
  //鼠标移入
  const mousemove = (val: items) => {
    // console.log(val, '滑过的val');
    //main盒子的存储
    let items1 = [...items]
    items1.forEach((item) => {
      if (item.key == val.key) {
        item.flag = true
      }
      else {
        item.flag = false
      }
    })
    setItems(items1)
  }
  return (
    <div className={style.box1}>
      {/* 轮播图 */}
      <div className={style.libs}>
        <Libs height={height} imgs={imgs}></Libs>
        <div className={style.dou}>
          {/* 搜索框 */}
          <Search></Search>
          {/* tab切换 */}
          <div className={style.tab}>
            <Tabs
              defaultActiveKey={defaultActiveKey} onChange={onChange}>
              {
                items.map((item: any, index: number) => {
                  return <Tabs.TabPane key={index}
                    tab={
                      <div className={style.icon_container} onMouseOver={() => mousemove(item)}>
                        <img
                          loading='lazy'
                          onError={handleError}
                          src={item.flag ? item.hovericon : item.icon} className={style.icon_img} />
                        <span className={style.icon_label} style={{ color: '#fff' }}>{item.title}</span>
                      </div>
                    }
                  >
                  </Tabs.TabPane>
                })
              }
            </Tabs>
          </div>
        </div>
      </div>
      {/* 下边排版 */}
      <div className={style.main}>
        <div>
          {
            keys == '0' ?
              <One></One>
              : ""
          }
        </div>
        <div>
          {
            keys == '1' ?
              <Two></Two>
              : ""
          }
        </div>
        <div>
          {
            keys == '2' ?
              <Three></Three>
              : ""
          }
        </div>
      </div>
      {/* 右下角 */}
      <BottomRight></BottomRight>
    </div>
  )
}

export default Index
